<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/order.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/TouchSlide.1.1.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .order-info {
            padding: 10px 0;
        }
        .address-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .shop-info {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .product-list {
            margin-top: 10px;
        }
        .product-item {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }
        .product-img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }
        .product-info {
            flex: 1;
        }
        .product-name {
            font-size: 14px;
            color: #333;
        }
        .product-price {
            font-size: 12px;
            color: #ff6b6b;
        }
        .product-count {
            font-size: 12px;
            color: #999;
        }
        .tab-active {
            border-bottom: 2px solid rgb(51, 51, 51);
            color: rgb(51, 51, 51);
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app" class="wrap">
    <div class="container">
        <div id="tabox" class="tabbox">
            <div  class="hd">
                <ul>
                    <li :class="{'tab-active': activeTab === 'all'}"><a href="#" @click.prevent="changeTab('all')">全部</a></li>
                    <li :class="{'tab-active': activeTab === 'pending'}"><a href="#" @click.prevent="changeTab('pending')">进行中</a></li>
                    <li :class="{'tab-active': activeTab === 'completed'}"><a href="#" @click.prevent="changeTab('completed')">已完成</a></li>
                    <li :class="{'tab-active': activeTab === 'cancelled'}"><a href="#" @click.prevent="changeTab('cancelled')">已取消</a></li>
                </ul>
            </div>
            <div class="bd">
                <ul v-if="activeTab === 'all'">
                    <li v-for="order in allOrders" :key="order.id">
                        <div class="order-no">
                            <span>订单号：<i>{{ order.id }}</i></span>
                            <span class="order-status">{{ getStatusText(order.status) }}</span>
                        </div>
                        <div class="order-detail">
                            <div class="order-info">
                                <div class="address-info">
                                    {{ order.address.name }} {{ order.address.phone }}<br>
                                    {{ order.address.city }} {{ order.address.department }} {{ order.address.houseNumber }}
                                </div>
                                <div class="shop-info">店铺：{{ order.shopName }}</div>
                                <div class="product-list">
                                    <div class="product-item" v-for="item in order.products" :key="item.product.name">
                                        <img :src="item.product.img" class="product-img">
                                        <div class="product-info">
                                            <div class="product-name">{{ item.product.name }}</div>
                                            <div class="product-price">¥{{ item.product.price }}</div>
                                            <div class="product-count">x{{ item.orderSales }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-footer">
                            <button v-if="order.status === 1" class="order-btn cancel-btn" @click="cancelOrder(order.id)">取消订单</button>
                            <button v-if="order.status === 1" class="order-btn complete-btn" @click="completeOrder(order.id)">确认收货</button>
                            <button v-if="order.status === 2" class="order-btn cancel-btn" @click="returnOrder(order.id)">退货</button>
                        </div>
                    </li>
                </ul>

                <ul v-if="activeTab === 'pending'">
                    <li v-for="order in pendingOrders" :key="order.id">
                        <div class="order-no">
                            <span>订单号：<i>{{ order.id }}</i></span>
                            <span class="order-status">进行中</span>
                        </div>
                        <div class="order-detail">
                            <div class="order-info">
                                <div class="address-info">
                                    {{ order.address.name }} {{ order.address.phone }}<br>
                                    {{ order.address.city }} {{ order.address.department }} {{ order.address.houseNumber }}
                                </div>
                                <div class="shop-info">店铺：{{ order.shopName }}</div>
                                <div class="product-list">
                                    <div class="product-item" v-for="item in order.products" :key="item.product.name">
                                        <img :src="item.product.img" class="product-img">
                                        <div class="product-info">
                                            <div class="product-name">{{ item.product.name }}</div>
                                            <div class="product-price">¥{{ item.product.price }}</div>
                                            <div class="product-count">x{{ item.orderSales }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-footer">
                            <button class="order-btn cancel-btn" @click="cancelOrder(order.id)">取消订单</button>
                            <button class="order-btn complete-btn" @click="completeOrder(order.id)">确认收货</button>
                        </div>
                    </li>
                </ul>

                <ul v-if="activeTab === 'completed'">
                    <li v-for="order in completedOrders" :key="order.id">
                        <div class="order-no">
                            <span>订单号：<i>{{ order.id }}</i></span>
                            <span class="order-status">已完成</span>
                        </div>
                        <div class="order-detail">
                            <div class="order-info">
                                <div class="address-info">
                                    {{ order.address.name }} {{ order.address.phone }}<br>
                                    {{ order.address.city }} {{ order.address.department }} {{ order.address.houseNumber }}
                                </div>
                                <div class="shop-info">店铺：{{ order.shopName }}</div>
                                <div class="product-list">
                                    <div class="product-item" v-for="item in order.products" :key="item.product.name">
                                        <img :src="item.product.img" class="product-img">
                                        <div class="product-info">
                                            <div class="product-name">{{ item.product.name }}</div>
                                            <div class="product-price">¥{{ item.product.price }}</div>
                                            <div class="product-count">x{{ item.orderSales }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-footer">
                            <button class="order-btn cancel-btn" @click="returnOrder(order.id)">退货</button>
                        </div>
                    </li>
                </ul>

                <ul v-if="activeTab === 'cancelled'">
                    <li v-for="order in cancelledOrders" :key="order.id">
                        <div class="order-no">
                            <span>订单号：<i>{{ order.id }}</i></span>
                            <span class="order-status">已取消</span>
                        </div>
                        <div class="order-detail">
                            <div class="order-info">
                                <div class="address-info">
                                    {{ order.address.name }} {{ order.address.phone }}<br>
                                    {{ order.address.city }} {{ order.address.department }} {{ order.address.houseNumber }}
                                </div>
                                <div class="shop-info">店铺：{{ order.shopName }}</div>
                                <div class="product-list">
                                    <div class="product-item" v-for="item in order.products" :key="item.product.name">
                                        <img :src="item.product.img" class="product-img">
                                        <div class="product-info">
                                            <div class="product-name">{{ item.product.name }}</div>
                                            <div class="product-price">¥{{ item.product.price }}</div>
                                            <div class="product-count">x{{ item.orderSales }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer class="footer">
        <ul>
            <li>
                <a href="../index.html">
                    <span class="iconfont icon-shouye"></span> 首页
                </a>
            </li>
            <li>
                <a href="shopcart.html">
                    <span class="iconfont icon-gouwuche"></span> 购物车
                </a>
            </li>
            <li>
                <a href="order.html" class="tabcur">
                    <span class="iconfont icon-dingdan"></span> 订单
                </a>
            </li>
            <li>
                <a href="user.html">
                    <span class="iconfont icon-wode"></span> 我的
                </a>
            </li>
        </ul>
    </footer>
</div>


<!--    <script>-->
<!--        const { createApp, ref, onMounted } = Vue;-->

<!--        createApp({-->
<!--        setup() {-->
<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 数据声明 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        const allOrders       = ref([]);-->
<!--        const pendingOrders   = ref([]);-->
<!--        const completedOrders = ref([]);-->
<!--        const cancelledOrders = ref([]);-->
<!--        const activeTab       = ref('all');-->

<!--        const statusMap = {-->
<!--        1: '进行中',-->
<!--        2: '已完成',-->
<!--        3: '已取消'-->
<!--    };-->
<!--        const getStatusText = status => statusMap[status] || '未知状态';-->

<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 工具函数 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        const formatOrders = list =>-->
<!--        (list || []).map(item => ({-->
<!--        id: item.ordernumber,-->
<!--        status: Number(item.isCanceled),-->
<!--        address: item.address,-->
<!--        shopName: item.shopName,-->
<!--        products: item.products-->
<!--    }));-->

<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 加载全部订单 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        const loadOrders = async () => {-->
<!--        try {-->
<!--        const res  = await fetch('http://localhost:3000/order');-->
<!--        const json = await res.json();-->

<!--        // 根据后端返回的字段结构一次性填充-->
<!--        allOrders.value       = formatOrders(json.order?.order0?.data);-->
<!--        pendingOrders.value   = formatOrders(json.order?.order1?.data);-->
<!--        completedOrders.value = formatOrders(json.order?.order2?.data);-->
<!--        cancelledOrders.value = formatOrders(json.order?.order3?.data);-->
<!--    } catch (err) {-->
<!--        console.error('加载订单数据失败:', err);-->
<!--    }-->
<!--    };-->

<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 交互逻辑 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        const changeTab = tab => { activeTab.value = tab; };-->

<!--        // 通用订单状态转移-->
<!--        const moveOrder = (orderId, fromList, toList, newStatus) => {-->
<!--        const idx = fromList.value.findIndex(o => o.id === orderId);-->
<!--        if (idx === -1) return;-->
<!--        const order = fromList.value[idx];-->
<!--        order.status = newStatus;-->
<!--        toList.value.push(order);-->
<!--        fromList.value.splice(idx, 1);-->

<!--        // 同步 allOrders 中的状态-->
<!--        const allIdx = allOrders.value.findIndex(o => o.id === orderId);-->
<!--        if (allIdx !== -1) allOrders.value[allIdx].status = newStatus;-->
<!--    };-->

<!--        const completeOrder = id => moveOrder(id, pendingOrders, completedOrders, 2);-->
<!--        const cancelOrder   = id => moveOrder(id, pendingOrders, cancelledOrders, 3);-->
<!--        const returnOrder   = id => moveOrder(id, completedOrders, cancelledOrders, 3);-->

<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 生命周期 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        onMounted(loadOrders);-->

<!--        /* &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 向外暴露 &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; */-->
<!--        return {-->
<!--        allOrders,-->
<!--        pendingOrders,-->
<!--        completedOrders,-->
<!--        cancelledOrders,-->
<!--        activeTab,-->
<!--        changeTab,-->
<!--        getStatusText,-->
<!--        completeOrder,-->
<!--        cancelOrder,-->
<!--        returnOrder-->
<!--    };-->
<!--    }-->
<!--    }).mount('#app');-->
<!--</script>-->

<script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
        setup() {
            const allOrders       = ref([]);
            const pendingOrders   = ref([]);
            const completedOrders = ref([]);
            const cancelledOrders = ref([]);
            const activeTab       = ref('all');

            const statusMap = {
                1: '进行中',
                2: '已完成',
                3: '已取消'
            };
            const getStatusText = status => statusMap[status] || '未知状态';

            const formatOrders = list =>
                (list || []).map(item => ({
                    id: item.ordernumber,
                    status: Number(item.isCanceled),
                    address: item.address,
                    shopName: item.shopName,
                    products: item.products
                }));

            const loadOrders = async () => {
                try {
                    const res = await fetch('http://localhost:3000/order');
                    if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
                    const json = await res.json();

                    // ✅ 根对象就是 order0~order3
                    allOrders.value       = formatOrders(json.order0?.data || []);
                    pendingOrders.value   = formatOrders(json.order1?.data || []);
                    completedOrders.value = formatOrders(json.order2?.data || []);
                    cancelledOrders.value = formatOrders(json.order3?.data || []);
                } catch (err) {
                    console.error('加载订单数据失败:', err);
                }
            };
            const changeTab = tab => { activeTab.value = tab; };

            const moveOrder = (orderId, fromList, toList, newStatus) => {
                const idx = fromList.value.findIndex(o => o.id === orderId);
                if (idx === -1) return;
                const order = fromList.value[idx];
                order.status = newStatus;
                toList.value.push(order);
                fromList.value.splice(idx, 1);
                const allIdx = allOrders.value.findIndex(o => o.id === orderId);
                if (allIdx !== -1) allOrders.value[allIdx].status = newStatus;
            };

            const completeOrder = id => moveOrder(id, pendingOrders, completedOrders, 2);
            const cancelOrder   = id => moveOrder(id, pendingOrders, cancelledOrders, 3);
            const returnOrder   = id => moveOrder(id, completedOrders, cancelledOrders, 3);

            onMounted(loadOrders);

            return {
                allOrders,
                pendingOrders,
                completedOrders,
                cancelledOrders,
                activeTab,
                changeTab,
                getStatusText,
                completeOrder,
                cancelOrder,
                returnOrder
            };
        }
    }).mount('#app');
</script>
</body>
</html>